<template>
  <el-form v-if="control" ref="controlEdit" :model="control" :rules="rules" label-width="120px">
    <el-card header="基础配置">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="标题" prop="Name">
            <el-input v-model="control.Name" :maxlength="50" placeholder="标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="说明" prop="Show">
            <el-input v-model="control.Show" :maxlength="50" placeholder="说明" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
    <el-tabs v-model="curTab" type="border-card" style="margin-top: 10px;">
      <el-tab-pane label="数据源配置" name="data">
        <el-form-item label="选择数据源" prop="FormId">
          <formInput v-model="control.FormId" placeholder="选择表单" :form-type="[2]" @change="initTable" />
        </el-form-item>
        <el-form-item v-if="control.FormId" label="选择数据表" prop="TableId">
          <el-select
            v-model="control.TableId"
            placeholder="选择数据表"
            @change="initColumn"
          >
            <el-option v-for="i in tables" :key="i.Id" :label="i.TableLabel" :value="i.Id" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="control.FormId && control.TableId" label="选择统计列" prop="ColumnId">
          <formColChiose
            v-model="control.ColumnId"
            :func-type="[0]"
            :filter="filterTable"
            :ver="ver"
            :is-mulite="true"
            :form-id="[control.FormId]"
          />
        </el-form-item>
        <pageFilterEdit ref="pageFilter" :form-id="control.FormId" :table-id="control.TableId" :disabled="control.TableId == null || control.FormId == null" :items="wheres" />
      </el-tab-pane>
      <el-tab-pane label="表单设置" name="style">
        <el-row>
          <el-col :span="12">
            <el-form-item label="占用宽度" prop="WidthRatio">
              <el-select v-model="control.WidthRatio" style="width: 100%;" placeholder="占用宽度">
                <el-option label="1/6" :value="6" />
                <el-option label="1/5" :value="5" />
                <el-option label="1/4" :value="4" />
                <el-option label="1/3" :value="3" />
                <el-option label="1/2" :value="2" />
                <el-option label="2/3" :value="23" />
                <el-option label="整行" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="占用高度(格)" prop="HeightGrid">
              <el-input-number
                v-model="control.HeightGrid"
                :min="5"
                :max="30"
                :step="1"
                :precision="0"
                style="width: 100%;"
                placeholder="占用高度(格)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否显示详细" prop="IsAction">
              <el-switch
                v-model="control.IsAction"
                active-text="显示"
                inactive-text="不显示"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每页显示条数" prop="PageSize">
              <el-input-number
                v-model="control.PageSize"
                :min="10"
                :max="100"
                :step="1"
                :precision="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item v-if="control.FormId && control.TableId" label="排序字段" prop="SortName">
              <el-select
                v-model="control.SortName"
                placeholder="排序字段"
              >
                <el-option v-for="i in columns" :key="i.Name" :label="i.Label" :value="i.Name" />
              </el-select>
              <el-switch
                v-model="control.IsDesc"
                style="margin-left: 10px;"
                active-text="降序"
                inactive-text="升序"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script>
import formInput from '@/customForm/components/form/formInput.vue'
import formColChiose from '@/customForm/components/form/formColChiose.vue'
import pageFilterEdit from './pageFilterEdit.vue'
import { EnumDic } from '@/customForm/config/formConfig'
import { GetTable, GetColumns } from '@/customForm/api/form'
export default {
  components: {
    formInput,
    formColChiose,
    pageFilterEdit
  },
  props: {
    contentWidth: {
      type: Number,
      default: null
    },
    source: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      EnumDic,
      control: null,
      controlSet: null,
      curTab: 'data',
      ver: 1,
      wheres: [],
      tables: [],
      columns: [],
      rules: {
        Name: [
          {
            required: true,
            message: '标题不能为空！',
            trigger: 'blur'
          }
        ],
        WidthRatio: [
          {
            required: true,
            message: '请选择占用宽度！',
            trigger: 'blur'
          }
        ],
        HeightGrid: [
          {
            required: true,
            message: '请选择占用高度！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    source: {
      handler(val) {
        if (val) {
          this.resetForm()
        } else {
          this.control = null
        }
      },
      immediate: true
    }
  },
  mounted() { },
  methods: {
    filterDataType() {
      if (this.control.FuncType === 1 || this.control.FuncType === 5) {
        return []
      } else {
        return [2, 3, 6, 9]
      }
    },
    filterFuncType() {
      if (this.control.FuncType === 1 || this.control.FuncType === 5) {
        return []
      } else {
        return [0]
      }
    },
    filterTable(res) {
      if (this.control.TableId == null) {
        return []
      }
      res.forEach(c => {
        if (c.Type === 4) {
          c.Children = c.Children.filter(a => a.Id === this.control.TableId)
        }
      })
      return res
    },
    async initTable() {
      if (this.control.FormId) {
        const list = await GetTable(this.control.FormId)
        this.tables = list
      } else {
        this.tables = []
      }
      this.ver = this.ver + 1
    },
    async initColumn() {
      if (this.control.FormId && this.control.TableId) {
        const list = await GetColumns({
          FormId: this.control.FormId,
          TableId: this.control.TableId,
          ShowMode: [0]
        })
        this.columns = list
      } else {
        this.columns = []
      }
      this.ver = this.ver + 1
    },
    resetForm() {
      const set = {
        Id: this.source.Id,
        Name: this.source.Name,
        WidthRatio: this.source.WidthRatio,
        HeightGrid: this.source.HeightGrid,
        Show: this.source.Show,
        FormId: null,
        TableId: null,
        ColumnId: null,
        IsAction: true,
        PageSize: 20,
        SortName: 'Id',
        IsDesc: true
      }
      if (this.source.ControlConfig && this.source.ControlConfig.Table) {
        const conf = this.source.ControlConfig.Table
        set.FormId = conf.FormId
        set.TableId = conf.TableId
        set.IsAction = conf.IsAction
        set.ColumnId = conf.ColumnId
        if (conf.Paging != null) {
          set.PageSize = conf.Paging.PageSize
          set.SortName = conf.Paging.SortName
          set.IsDesc = conf.Paging.IsDesc
        }
        this.wheres = conf.Where
      } else {
        this.wheres = []
      }
      this.control = set
      this.initTable()
      this.initColumn()
      this.curTab = 'data'
    },
    save() {
      const that = this
      return new Promise((resolve, reject) => {
        that.$refs['controlEdit'].validate((valid) => {
          if (valid) {
            const data = that.getData()
            if (data == null) {
              reject()
              return
            }
            resolve(data)
          } else {
            reject()
            return false
          }
        })
      })
    },
    getData() {
      const where = this.$refs.pageFilter.getValue()
      if (where.isError) {
        return null
      }
      const data = {
        Name: this.control.Name,
        WidthRatio: this.control.WidthRatio,
        HeightGrid: this.control.HeightGrid,
        Show: this.control.Show,
        ControlConfig: {
          Table: null
        }
      }
      const config = {
        FormId: this.control.FormId,
        TableId: this.control.TableId,
        Paging: {
          PageSize: this.control.PageSize,
          SortName: this.control.SortName,
          IsDesc: this.control.IsDesc
        },
        IsAction: this.control.IsAction,
        ColumnId: this.control.ColumnId,
        Where: where.rows
      }
      data.ControlConfig.Table = config
      return data
    }
  }
}
</script>
<style scoped>
.controlView {
    width: 100%;
    height: 600px;
    line-height: 600px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
}
.controlView .el-card {
    display: inline-block;
    line-height: normal;
}
.header {
    height: 30px;
    line-height: 30px;
    border-left: 4px solid #409eff;
    text-indent: 5px;
    font-size: 1.2em;
    margin-bottom: 5px;
}
</style>
